<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1505%2F18%2Fc7%2F6943824_1431926334748.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615017033&t=204c51100f9b956dbc262688ced1ff6f) no-repeat;
            background-size: 100%;
        }
        
        .xg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 510px;
            height: 350px;
            background-color: rgba(0, 0, 0, .3);
            text-align: center;
        }
        
        .top {
            margin-top: 25px;
            font-size: 30px;
            font-weight: bold;
            color: #fff;
        }
        
        .bottom {
            margin-top: 30px;
        }
        
        .bottom input {
            height: 30px;
            font-size: 30px;
            border: none;
            background: rgba(0, 0, 0, .3);
            color: #fff;
        }
        
        .tj,
        .qx {
            width: 150px;
            margin: 0 25px;
            border-radius: 10px;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
        }
        
        .tj {
            background: rgba(209, 96, 20, 0.3);
            color: #fff;
            border: none;
            cursor: pointer;
        }
        
        .qx {
            background: rgba(236, 241, 240, 0.3);
            border: none;
            cursor: pointer;
        }
        
        .bton {
            margin-top: 30px;
            margin-bottom: 20px;
        }
        
        .qr2 {
            margin-top: 25px;
        }
        
        .qr1,
        .qr2 {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="xg" id="vue">
        <div class="top">
            <h>你好！{{userId}}</h>
        </div>
        <div class="bottom">
            <p class="qr1">请输入你要修改的密码:<input type="password" class="sr" v-model="pwd1"></p>
            <p class="qr2">请确认你要修改的密码:<input type="password" class="qr" v-model="pwd2"></p>
        </div>
        <div class="bton">
            <input type="button" class="tj" value="提交" @click="confirm()">
            <input type="button" class="qx" value="取消">
        </div>
    </div>
    <script src="../js/ajax.js"></script>
    <script src="../js/jquery.1.9.1.js"></script>
    <script src="../js/vue.js"></script>
    <script>
        var app  = new Vue({            
            el: '#vue',
            data: {
                pwd1: "",
                pwd2: "",
                userId: ""
            },
            mounted()  {                
                this.userId = localStorage.userId
            },
            methods: {                
                confirm() {
                    if (this.pwd1 !== this.pwd2) {
                        alert('你输入的密码不一致')
                    }
                    $.post('../../php/modifyPwd.php', {
                            username: this.userId,
                            pwd: this.pwd1
                        },
                        function(data, status) {
                            alert('修改成功')
                            window.location.href = "backstage.html"
                        })
                }
            },
        })
    </script>
</body>

</html>